
// 获取身高对应的input标签
// getElementById（），从html文档中，通过id找到对应的标签元素
var h_input = document.getElementById('height-data');
console.log(h_input)

// 获取体重对应的input标签
var w_input = document.getElementById('weight-data');
console.log(w_input);

// 获取显示BMI和身体状态的span标签
var BMI_span = document.getElementById('BMI-value');
var status_span = document.getElementById('status');

// 获取隐藏的 td（#result）
var result_td = document.getElementById('result');

// 获取计算按钮
// querySelector（），通过css选择器的方式找到满足条件的第一个标签元素
var calcBtn = document.querySelector('#calcBtn');

// 给计算按钮绑定点击事件,onclick:鼠标点击事件
calcBtn.onclick = function(){
    // 1.计算BMI
    // 获取用户输入的身高和体重值
    var height = h_input.value/100;
    var weight = w_input.value/1;
    console.log(typeof height + "，"　+　typeof weight);
    console.log("height:" + height +　",weight:" +　weight);
    
    // 判断输入框中是否为空
    // NaN： not a number; isNaN()判断一个数是否为NaN
    if(height==0 || isNaN(height) || weight == 0 || isNaN(weight)){
        alert("请输入您的身高和体重！")
        return;
    }

    var BMI = weight/(height * height);
    // 保留1位小数
    BMI = BMI.toFixed(1);
    // 2.根据BMI值，判断身体状态
    var status = "";
    if(BMI <= 18.4){
        status = '偏瘦'
    }
    else if(BMI <= 23.9){
        status = '正常'
    }
    else if(BMI <= 27.9){
        status = '过重'
    }
    else{
        status = '肥胖'
    }
    
    // 3.将BMI值，与身体状态显示在页面上
    // innerText,往标签内部插入文本内容
    BMI_span.innerText = BMI;
    status_span.innerText = status;

    // 让隐藏的td显示出来
    result_td.style.display = "table-cell";
}


